/**
 * 插槽相关的操作
 *
 *    前置知识点：
 *      1. 组件开始标签与闭合标签中的内容，是不会渲染出来的。
 *      2. React中开始标签与合并标签中的内容，会作为一个名叫 children 的prop传递给组件
 *
 *
 *    1. 组件内要渲染插槽内容出去，就是将 props.children 放在需要的位置使用即可
 *    2. 渲染作用域：插槽内容中使用的数据是找谁要？
 *        不看最终渲染在那个位置，而是看这段插槽内容在哪里编写的。
 *          App 组件内写的就找 App
 *          Hello 组件内写的就找 Hello
 *    3.具名插槽：有多个 slot 坑位，每个坑位设置 name 标记名字，后续给插槽内容通过 v-slot:某个slot坑的名字
 *      在 React 中，玩具名插槽，就不能使用这种在 开始标签与闭合标签中写内容的方式了。而是直接在标签上传递不同的prop给子组件即可。
 *    4. 作用域插槽：将组件内的数据，传递到插槽内容中去使用。
 *      <el-table-column>
 *        <template v-slot:default="scope">
 *
 *        </template>
 *      </el-table-column>
 *
 *      <slot a="1" b="2"></slot>
 *
 *      React 中，它需要你传递给组件的prop是一个函数才行。
 *
 *
 */

import React, { Fragment } from "react";

class Hello extends React.Component {
  state = {
    name: "Hello",
  };

  render() {
    return (
      <div>
        {this.props.top}
        <h4>Hello</h4>
        {this.props.bottom}

        {this.props.children}
        <hr />
        {this.props.abc(this.state.name)}
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    name: "App",
  };

  render() {
    return (
      <div>
        <h1>插槽</h1>

        <Hello
          top={<button>Top</button>}
          bottom={<button>Bottom</button>}
          abc={(name) => {
            return <button>Abc - {name}</button>;
          }}
        >
          <p>我是插槽内容 - {this.state.name}</p>
        </Hello>
      </div>
    );
  }
}

export default App;
